<template>
<!-- 一个div包裹 -->
    <div class="phoneLogin">
        <!-- 一个表单 : 提交 -->
        <el-form :model="phoneForm" :rules="rules" ref="phoneForm">
            <!-- 手机号码 + 验证码 + 登录按钮 -->
            <el-row :gutter="10">
                <el-col :span="9">
                    <el-form-item prop="phone">
                        <el-input placeholder="请输入手机号" v-model="phoneForm.phone">
                            <i slot="prefix" class="el-icon-phone"></i>
                        </el-input>
                    </el-form-item>
                 </el-col>
            </el-row>
            
            <el-row :gutter="11">
                <el-col :span="6">
                    <el-form-item prop="code">
                        <el-input placeholder="请输入验证码" v-model="phoneForm.code" maxlength="8">
                            <i slot="prefix" class="el-icon-tickets"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-button @click="sendCode" :disabled="disabled">{{ btnText }}</el-button>
                </el-col>
            </el-row>
            
            <el-form-item>
                <el-button type="primary" style="width: 100%;" @click="phoneLogin">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'PhoneLogin',
    data() {
        //1: 添加校验 : 校验规则 + 输入值 + 回调方法
        let checkPhone = (rule, value, callback) => {
            if(!value) {
                return callback(new Error('手机号不能为空!'))
            } else {
                 let reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                  if (reg.test(value)) {
                    callback()
                  } else {
                    return callback(new Error('请输入正确的手机号！'))
                  }
            }
        }
        //2: 返回规则
        return {
            rules: {
                phone: [
                    {validator: checkPhone, trigger: 'change'}
                ],
                code: [
                    {required: true, message: '验证码不能为空', trigger: 'blur'}
                ]
            },
            disabled: false,
            btnText: '发送验证码',
            time: 0
        }

    },
    props:{
        phoneForm: {//表单对象
            type: Object,
            required: true
        },
        countDown: {//倒计时
            type: Number,
            default: 60
        }
    },
    mounted() {
        //dom元素加载完毕后 
        this.time = this.countDown
    },
    methods: {
        sendCode() {
            //1.手机号必须输入正确，不正确提示
            this.$refs.phoneForm.validateField('phone', errorMessage => {
                 // 1.时间开始倒数
                // 2.按钮进入禁用，
                // 3.倒计时结束，按钮恢复可用，按钮文字变成重新发送, 把倒计时时间重置
                // 4.倒计时国产中，按钮变成 多少s 重新发送
                console.log(errorMessage)
                if(errorMessage) {
                    this.$message.error(errorMessage)
                } else {
                    let timer = setInterval(() => {
                        this.time--
                        this.btnText = `${this.time}s重新发送`
                        this.disabled = true
                        if(this.time === 0) {
                            this.disabled = false
                            this.btnText = '重新发送'
                            this.time = this.countDown
                            clearInterval(timer)//清除定时器
                        }
                    }, 1000)
                    this.$emit('send')
                }
                
            })
        },
        phoneLogin() {
            //提交
            this.$refs.phoneForm.validate(valid => {
                if(valid) {
                    this.$emit('submit')
                } else {
                    this.$emit('errHandle')
                }
            })
        }
    }
}
</script>
<style scoped>

</style>